<template>
  <a-row type="flex" justify="space-around" align="middle" class="content-head">
    <a-col :span="12">
      <a-breadcrumb class="content-head-bread">
        <a-breadcrumb-item v-for="(item, index) in routerbread"
                           :key="'content-header-breadcrumb-' + index">
          {{ item }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </a-col>
    <a-col :span="12"></a-col>
  </a-row>
</template>

<script>
export default {
  name: 'ContentHeader',
  props: {
    routerbread: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    }
  },
  created() {
  }
};
</script>

<style lang="less" scoped>
  .content-head{
    height: 48px;
    padding: 0 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 0 80px 0 rgb(0 0 0 / 10%);
    .content-head-bread {
      float: left;
      font-size: 14px;
    }
  }
</style>
